<template>
  <div>
    <h1>setup</h1>
    {{ count }}
    <button @click="handleClick">click</button>
    <h2>{{ score }}</h2>
    <button @click="getScore">get Score</button>
  </div>
</template>
<script>
export default {
  /**
   *  1.setup 函数是 Vue3 特有的选项，作为组合式API的起点
      2.从组件生命周期看，它在 beforeCreate 之前执行
      3.函数中 this 不是组件实例，是 undefined
      4.如果数据或者函数在模板中使用，需要在 setup 返回
   */
  setup() {
    console.log('setup', this);
    const count = 1;
    const handleClick = () => {
      console.log('click');
    }
    // score 分数 getScore方法 打印score
    const score = 100
    const getScore = () => {
      console.log(score);
    }
    return {
      count,
      handleClick,
      score,
      getScore
    } 
  },
  beforeCreate() {
    console.log('beforeCreate', this);
  }
}
</script>


